<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @touchstart.stop @click="handleBack">
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">小程序相关功能</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <div class="ui-mode-content flex1" ref="scroll">
            <template v-if="pageStatus">
                <van-notice-bar :scrollable="false" wrapable class="notice-wrap">
                    点击右上角分享查看分享效果。
                </van-notice-bar>
                <div class="mt-user-info">
                    <!-- 获取用户相关信息 -->
                    <div class="item flex-row align-center" @click="goMiniProgramPage({name:'获取用户相关信息',path:'/pages/alert/alert',jumpType:'h5Url',jumpUrl:'front_page_index.html?v=3.0#/my/miniProgram?isFakeJump=true'})">
                        <div class="label flex1">获取用户相关信息</div>
                        <span class="value">点击获取</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                    <!-- 获取用户手机号码 -->
                    <div class="item flex-row align-center" @click="goMiniProgramPage({name:'获取用户手机号码',path:'/pages/alert/getPhone',jumpType:'h5Url',jumpUrl:'front_page_index.html?v=3.0#/my/miniProgram?isFakeJump=true'})">
                        <div class="label flex1">获取用户手机号码</div>
                        <span class="value">点击获取</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                    <!-- 查看文件 -->
                    <div class="item flex-row align-center" @click="goPage({name:'查看文件',path:'/my/miniProgram/file'})">
                        <div class="label flex1">查看文件</div>
                        <span class="value">点击查看</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import menuData from '@/assets/data/menu';
export default {
    name: 'my',
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
            public_goods_order_record:{},
            showShare:false
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest
    ],
    components:{
    },
    computed:{
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init);
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        /*
         * 初始化
         */
        init(){
            this.getPageInfo({
                name:'my',
                param:{
                    invoke_method:'user_and_shop_info'
                }
            }).then(({result,response})=>{
                this.public_agent_info=result.public_agent_info||{};
                this.public_user_info=result.public_user_info||{};
                this.public_goods_order_record=result.public_goods_order_record||{};
                document.title=this.public_agent_info.application_name;
                this.setState({
                    key:'public_agent_info',
                    value:this.public_agent_info
                });
                this.setState({
                    key:'public_user_info',
                    value:this.public_user_info
                });
                this.setLoginStatus({
                    status:true,
                    token:`${result.token_type} ${result.access_token}`,
                    expires:result.token_expires_time
                });
                this.getMenuList().then(()=>{
                }).catch(({msg})=>{
                    this.showMessage(msg);
                });
                var shareTitle = '分享标题可自定义';
                var shareImage = this.public_user_info.weichat_img;
                var shareJumpUrl = encodeURIComponent('front_page_index.html?v=3.0#/my/miniProgram?isFakeJump=true');
                if(this.isMiniProgram){
                    this.$wx.miniProgram.postMessage({
                        data: {
                            shareTitle: shareTitle,
                            shareImage: shareImage,
                            shareJumpUrl: shareJumpUrl
                        }
                    });
                }else{
                    this.showMessage('调用小程序分享！');
                };
            });
        },
        /*
         * 请求失败刷新
         */
        handleRefresh(){
            this.init();
        },
        goMiniProgramPage(item){
            if(this.isMiniProgram){
                if(item.path){
                    var link=item.jumpUrl?encodeURIComponent(item.jumpUrl):'';
                    var url=item.path+'?jumpType='+item.jumpType+'&jumpUrl='+link;
                    this.$wx.miniProgram.redirectTo({url});
                }
            }else{
                this.showMessage('调用小程序跳转页面！');
            };
        },
        goPage(item){
            if(item.path){
                this.$router.push({
                    path:item.path,
                    query:{
                        id:this.public_goods_order_record.id_public_goods_order_record,
                        type:'miniProgram'
                    }
                });
            }
        },
        handleBack(){
            let protocol = window.location.protocol //协议
            let host = window.location.host //主机
            if(this.$route.query.isFakeJump){
                window.location.href = protocol + "//" + host + '/weichat_enter_4_app_wholefarm?fake_id=' + this.public_user_info.id_sns + '&empower_code=5678&jump_type=701&new_page=front_page_index.html?v=3.0#/front_page_index?redirect=my';
            }else{
                this.$router.go(-1);
            }
        },
        /*
         * 打开弹窗
         */
        show(status,key){ 
            this[key]=true;
        },
        /*
         * 关闭弹窗
         */
        close(key){
            this[key]=false;
        },
        /*
         * 获取菜单
         */
        getMenuList(){
            return new Promise((resolve,reject)=>{
                let result=menuData.returnData;
                this.setMenuList(result.list);
                resolve(result.list);
            });
        },
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.mt-avatar-item{
    position:relative;
    .box{
        width:3rem;
        height:3rem;
        border:solid 2px #fff;
        margin-bottom:0.5rem;
        box-shadow:1px 1px 3px #999;
        border-radius:50%;
        overflow:hidden;
        background:#f9f9f9;
        position:relative;
    }
    p{
        line-height:1.2rem;
        color:#fff;
        font-size:0.7rem;
    }
}
.mt-user-info{
    border-top:solid 1px #e9e9e9;
    .item{
        position:relative;
        padding:0 0.5rem;
        line-height:3rem;
        font-size:0.8rem;
        border-bottom:solid 1px #e9e9e9;
        .label{
            color:#4a4a4a;
        }
        .value{
            color:#4a4a4a;
            margin-right:0.3rem;
        }
        .icon{
            color:#888;
            font-size:0.8rem;
        }
        &:last-child{
            border-top:none;
        }
        &:active{
            background:#eee;
        }
    }
}
.notice-wrap{
    margin-bottom:.85rem;
}
</style>
